<template>
  <div class="wxLoginPage">
    <div>
      <button class="buttonDiv" @click="wxCodeAuth" v-if="readChecked">
        微信授权登录
      </button>
      <button class="buttonDiv" @click="noWxCodeAuth" v-else>
        微信授权登录
      </button>
      <div class="readMe">
        <u-checkbox v-model="readChecked" icon-size="0"></u-checkbox>
        我已认真阅读并同意
        <span class="readMe1" @click="readMsgBtn(2)">《服务协议》</span>
        和
        <span class="readMe1" @click="readMsgBtn(3)">《隐私政策》</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as $utils from '../../../utils/utils.js'
let app = getApp()

export default {
  data() {
    return {
      readChecked: false,
    }
  },
  mounted() {
    uni.removeStorageSync('userInfo')
    uni.removeStorageSync('token')
    // this.$store.dispatch('app/on_tabBotName', this.$store.state.app.tabsList[0])
  },
  methods: {
    noWxCodeAuth() {
      uni.showToast({
        title: '请阅读同意条款',
        icon: 'none',
      })
    },
    readMsgBtn(i) {
      uni.navigateTo({
        url: '/pages/auth/login/read?type=' + i,
      })
    },
    wxCodeAuth() {
      const wxLoginConfig = {
        appid: 'wxb53a718a8c5450fe',
        redirect_uri:
          'http://test.zechaoxinxi.com/baseService/public/getIndex/toUrl?type=' +
          location.origin +
          '?redirectLoginPage',
        response_type: 'code',
        scope: 'snsapi_userinfo',
      }

      const onWxCode = () => {
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?${$utils.qsStringify(
          wxLoginConfig
        )}&state=STATE#wechat_redirect`
      }

      const getWxCode = () => {
        return new Promise((resolve, reject) => {
          const code = $utils.urlQuery('code')
          if (!code) {
            reject()
          } else {
            resolve(code)
          }
        })
      }

      getWxCode()
        .then((res) => {
          this.$api(
            'AuthLoginByH5WX',
            {
              code: res,
            },
            'POST'
          )
            .then(function(res1) {
              console.log(res1)
              uni.setStorageSync('userInfo', res1.data.userInfo)
              uni.setStorageSync('token', res1.data.token)
              app.globalData.hasLogin = true

              uni.redirectTo({
                url: '/pages/index/index',
              })
              // wxSDK.config({
              //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              //   appId: 'wxb53a718a8c5450fe', // 必填，公众号的唯一标识
              //   timestamp: '', // 必填，生成签名的时间戳
              //   nonceStr: '', // 必填，生成签名的随机串
              //   signature: '', // 必填，签名
              //   jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
              // })
            })
            .catch(() => {
              // uni.showModal({
              //   title: '提示',
              //   content: '授权失败！',
              //   showCancel: false,
              //   success: function(res) {
              //     if (res.confirm) {
              //       onWxCode()
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
            })
        })
        .catch(() => {
          onWxCode()
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.wxLoginPage {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  .buttonDiv {
    display: block;
    width: 90%;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 96rpx;
    background: #ff654b;
    border: 1px solid #ff654b;
    padding: 0;
    font-size: 30rpx;
    margin: 0;
    color: #fff;
    text-align: center;
    margin: 0 auto;
  }
  .readMe {
    display: flex;
    align-items: center;
    margin-top: 60rpx;
    font-size: 28rpx;
  }
  .readMe1 {
    color: #ff654b;
  }
  .popupView {
    width: 80vw;
    padding: 20rpx;
  }
  .popupView2 {
    max-height: 70vh;
  }
  .popupView1 {
    width: 80vw;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #333;
    border-top: 1px solid #d7d7d7;
  }
}
</style>
